<template>
  <div class="order-list-container">
    <el-card class="filter-card">
      <el-form inline>
        <el-form-item label="订单编号">
          <el-input v-model="datas.key" placeholder="搜索订单编号" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="datas.statusFilter" style="width: 200px" placeholder="选择订单状态">
            <el-option label="未支付" value="未支付" />
            <el-option label="已支付" value="已支付" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchOrders">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="orders-card">
      <el-table
        v-loading="data.loadings"
        :data="data.tableData"
        style="width: 100%; height: 320px"
        row-class-name="order-row"
      >
        <el-table-column prop="Ordernumber" label="订单编号" width="300px" />
        <el-table-column prop="status" label="订单状态">
          <template #default="scope">
            <el-tag :type="scope.row.status == '已支付' ? 'success' : 'danger'">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="实付金额" />
        <el-table-column prop="Creationtime" label="下单时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="viewOrderDetails(scope.row)">查看详情</el-button>
            <el-button v-if="scope.row.status == '未支付'" type="danger" @click="dele(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          :page-size="datas.limit"
          layout="prev, pager, next"
          :total="datas.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      v-model="data.dialogTableVisible"
      :destroy-on-close="true"
      title="订单详情"
      width="800"
    >
      <orderxx :data="data.gridData" />
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch } from "vue";
import orderxx from "@/components/orderxx.vue";
import { Get_offline_orders, dele_offline_orders } from "@/api/offline";

const data = reactive({
  isOpen: false,
  loadings: false,
  dialogTableVisible: false,
  tableData: [],
  gridData: [],
});

const datas = reactive({
  page: 1,
  limit: 6,
  total: 0,
  statusFilter: "",
  key: "",
});

//订单详细
const viewOrderDetails = (order) => {
  data.gridData = order;
  data.dialogTableVisible = true;
};

//删除
const dele = async (order) => {
  const res = await dele_offline_orders({ id: order.id });
  if (res.code === 0) {
    data.tableData = res.data.data;
    datas.total = res.data.total;
  }
};

//获取订单表数据
const bind = async () => {
  data.loadings = true;
  const res = await Get_offline_orders({
    ...datas,
  });
  if (res.code === 0) {
    data.tableData = res.data.data;
    datas.total = res.data.total;
  }
  data.loadings = false;
};

onMounted(() => {
  bind();
});

// 监听数据变化
watch([datas], (newVal, oldVal) => {
  bind();
});
</script>

<style scoped>
.order-list-container {
  padding: 20px;
  background-color: #f0f2f5;
  height: 630px;
}

.filter-card {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.orders-card {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.order-row {
  transition: background-color 0.3s;
}

.order-row:hover {
  background-color: #f5f7fa;
}

.pagination-container {
  margin: 8px 0 0 500px;
}
</style>
